@extends('layouts.console_main')

@section('resources')
    @parent
    <style type="text/css">
        #container{ width:670px; height: 400px;}
        .getlngandlat{width:100px; height: 30px;border-radius: 5px;margin-top:4px; background-color: #57d448;}
    </style>
@endsection
@section('content')
    <div class="right_col" role="main">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>阀门管理   >>  阀门新增</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Settings 1</a>
                                    </li>
                                    <li><a href="#">Settings 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <br />
                        <form id="add_valve" data-parsley-validate class="form-horizontal form-label-left">
                            <div class="form-group">
                                <label class="control-label col-md-1 col-sm-3 col-xs-12" for="first-name">编号<span class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    @if(isset($number))
                                        <input type="hidden" name="id" value="{{$id}}">
                                        <input type="text" id="first-name" name="number" required="required" class="form-control col-md-7 col-xs-12" value="{{$number}}" readonly>
                                    @else
                                        <input type="text" id="first-name" name="number" required="required" class="form-control col-md-7 col-xs-12">
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">名称 <span class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    @if(isset($name))
                                    <input type="text" id="last-name" name="name" required="required" class="form-control col-md-7 col-xs-12" value="{{$name}}">
                                    @else
                                    <input type="text" id="last-name" name="name" required="required" class="form-control col-md-7 col-xs-12">
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="middle-name" class="control-label col-md-1 col-sm-3 col-xs-12">口径</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    @if(isset($caliber))
                                    <input id="middle-name" class="form-control col-md-7 col-xs-12" type="text" name="caliber" value="{{$caliber}}">
                                    @else
                                    <input id="middle-name" class="form-control col-md-7 col-xs-12" type="text" name="caliber">
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="middle-name" class="control-label col-md-1 col-sm-3 col-xs-12">父节点编号</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    @if(isset($father_node))
                                    <input id="middle-name" class="form-control col-md-7 col-xs-12" type="text" name="father_node" value="{{$father_node}}">
                                    @else
                                    <input id="middle-name" class="form-control col-md-7 col-xs-12" type="text" name="father_node">
                                    @endif
                                </div>

                                <div style="display: inline; font-size: 14px">(如果没有父节点，填0)</div>
                            </div>
                            <div class="form-group">
                                <label for="middle-name" class="control-label col-md-1 col-sm-3 col-xs-12">计量区域</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    @if(isset($area))
                                    <input id="middle-name" class="form-control col-md-7 col-xs-12" type="text" name="area" value="{{$area}}">
                                    @else
                                    <input id="middle-name" class="form-control col-md-7 col-xs-12" type="text" name="area">
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="middle-name" class="control-label col-md-1 col-sm-3 col-xs-12">经纬度</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <input class="getlngandlat" value="获取经纬度" onclick="getLngAndLat();"  type="button"/>
                                    @if(isset($longitude))
                                        <input type="hidden" name="longitude" value="{{$longitude}}" />
                                        <input type="hidden" name="latitude" value="{{$latitude}}" />
                                    @else
                                        <input type="hidden" name="longitude" value="" />
                                        <input type="hidden" name="latitude" value="" />
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="middle-name" class="control-label col-md-1 col-sm-3 col-xs-12">地图</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <div id="container"></div>
                                </div>
                            </div>
                            <div class="ln_solid"></div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-1">
                                    @if(!isset($id))
                                        <button class="btn btn-primary" type="button" id="submit_new_data">提交</button>
                                    @else
                                        <button class="btn btn-primary" type="button" id="submit_edit_data">提交</button>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <br />
    </div>
@endsection

@section('scriptResources')
    @parent
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=a9fe1b184bacd00ecd70365903024419&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script>
        var id = $("input[name='id']").val();
        if(id) {
            var longitude = $("input[name='longitude']").val();
            var latitude = $("input[name='latitude']").val();
            var lntlatXY = [parseFloat(longitude), parseFloat(latitude)];
            var name = $("input[name='name']").val();
            var  map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 13,
                center:lntlatXY
            })
            marker = new AMap.Marker({  //加点
                map: map,
                position: lntlatXY,
                title:name
            });
            map.setFitView();
        } else {
            var lntlatXY;
            var marker, map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 13
            })
        }
        function getLngAndLat() {
            var area = $("input[name='area']").val();
            if(area == '') {
                alert("请输入计量区域");
            }
            $.ajax({
                url : '/lngandlat/get',
                data:{"address":area},
                dataType:'json',
                success:function(data){
                    if(data.status == 'success') {
                        var longitude = data.data.longitude;
                        var latitude = data.data.latitude;
                        $("input[name='longitude']").val(longitude);
                        $("input[name='latitude']").val(latitude);
                        lnglatXY = [$("input[name='longitude']").val(),$("input[name='latitude']").val()]; //已知点坐标
                        if (marker) {
                            marker.setMap(null);
                            marker = null;
                        }
                        marker = new AMap.Marker({  //加点
                            map: map,
                            position: lnglatXY
                        });
                        map.setFitView();
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        }
        function geocoder_CallBack(data) {
            var address = data.regeocode.formattedAddress; //返回地址描述
            document.getElementById("result").innerHTML = address;
        }
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            marker.setMap(null);
            lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()]
            // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
            console.log(e.lnglat.getLng());
            marker = new AMap.Marker({  //加点
                map: map,
                position: lnglatXY
            });
            map.setFitView();
            $("input[name='longitude']").val(e.lnglat.getLng());
            $("input[name='latitude']").val(e.lnglat.getLat());
        });
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }
        $("#submit_new_data").click(function(){
            $.ajax({
                url : '/valve/add/submit',
                data: $("#add_valve").serialize(),
                type:'post',
                dataType:'json',
                success:function(data){
                    if(data.status == 'failed') {
                        alert(data.message); return;
                    } else {
                        alert("新增成功");
                        window.location.href = "/valve/list";
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        })
        $("#submit_edit_data").click(function() {
            $.ajax({
                url : '/valve/edit',
                data: $("#add_valve").serialize(),
                type:'post',
                dataType:'json',
                success:function(data){
                    if(data.status == 'failed') {
                        alert(data.message); return;
                    } else {
                        alert("编辑成功");
                        window.location.href = "/valve/list";
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        })
    </script>
@endsection
